<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
	    #tab{
	    	background: #ccc;width:400px;
	    }
	    ul{
	    	width:400px;height: 300px;
	    }
        li{
        	list-style: none;float: left;border:1px solid #999;width:100px;height:100px;text-align: center;background:#000;margin:5px;
        }
        h2{
        	color:#fff;
        }
        p{
        	color:red;
        }
        #text{
        	width:300px;height: 200px;border:1px solid #ccc;margin:0 0 0 38px;
        }
        .active{
        	background:pink;
        }

	</style>
	<script type="text/javascript">
        window.onload = function (){
        	//用一个数组存放每个月的活动信息
        	var arr = [
                '一月去旅游吧',
                '二月去香港购物',
                '三月去踏青。。。。。',
                '四月清明节。。。。。',
                '五月端午节。。。。。',
                '六月儿童节。。。。。',
                '七月建军节。。。。。',
                '八月中秋节。。。。。',
                '九月去登山。。。。。',
                '十月回家。。。。。',
                '十一月。。。。。',
                '十二月。。。。。',

        	];
        	var oDiv = document.getElementById('tab');
        	var aLi = oDiv.getElementsByTagName('li');
        	var oTxt = oDiv.getElementsByTagName('div')[0];

        	for(var i=0;i<aLi.length;i++){
        		aLi[i].index = i;
        		//给每个li加事件
        		aLi[i].onmouseover = function (){
                    //用一个循环把li的样式先清空
                    for(var i=0;i<aLi.length;i++){
                    	aLi[i].className = '';
                    }
                    
                    //显示当前个li样式
                    this.className = 'active';

                    oTxt.innerHTML = '<h3>'+(this.index+1)+'月活动</h3><span>'+arr[this.index]+'</span>';
        		};
        	}

        	
        }

	</script>
</head>
<body>
    <div id="tab">
    	<ul>
    		<li class="active"><h2>1</h2><p>January</p></li>
    		<li><h2>2</h2><p>February</p></li>
    		<li><h2>3</h2><p>March</p></li>
    		<li><h2>4</h2><p>April</p></li>
    		<li><h2>5</h2><p>May</p></li>
    		<li><h2>6</h2><p>June </p></li>
    		<li><h2>7</h2><p>July</p></li>
    		<li><h2>8</h2><p>August</p></li>
    		<li><h2>9</h2><p>September </p></li>
    		<li><h2>10</h2><p>October</p></li>
    		<li><h2>11</h2><p>November</p></li>
    		<li><h2>12</h2><p>December</p></li>
    	</ul>

    	<div id="text">
    		<h3>1月活动</h3>
    		<span>一月去旅游吧</span>
    	</div>
    </div>
	
</body>
</html>